
    <template>
  <div class="common-layout">
    <el-container>
      <el-header>

          <!-- 统计信息 -->
          <div class="stats-container">
          <el-row :gutter="20">
            <el-col :span="6">
              <div class="stat-item total">
                <div class="stat-label">慢病患者</div>
                <div class="stat-value">1234</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="stat-item high-risk">
                <div class="stat-label">高危患者</div>
                <div class="stat-value">34</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="stat-item medium-risk">
                <div class="stat-label">中危患者</div>
                <div class="stat-value">200</div>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="stat-item low-risk">
                <div class="stat-label">低危患者</div>
                <div class="stat-value">1000</div>
              </div>
            </el-col>
          </el-row>
          </div>
          <!--条件查询-->
    <el-form :inline="true" :model="form" class="demo-form-inline" style="margin-top: 20px;">
            <el-form-item label="病种" :label-width="formLabelWidth">
              <el-select v-model="form.Hypertension" placeholder="请输适合病种" style="width: 150px;">
                <el-option label="全部" value="" />
                <el-option label="高危患者" :value="0" />
              </el-select>
            </el-form-item>

            <el-form-item label="姓名">
            <el-input v-model="form.ResidentFiles_Name" placeholder="请输入姓名" clearable />
            </el-form-item>

  <el-form-item>
    <el-button type="primary" @click="handleQuery">查询</el-button>
  </el-form-item>

    </el-form>

      </el-header>

      <el-main style="margin-top: 50px;">
       <el-tabs>
        <el-tab-pane label="卡片">
 <!-- 卡片列表 -->
        <el-row :gutter="20">
      
            <el-card class="patient-card" v-for="item in kpdata" :key="item.ncdSign_Id" style="margin-left: 30px;">
              <!-- 患者信息头部 -->
              <div class="card-header">
                <div class="patient-info">
                  <img
      src="https://shadow.elemecdn.com/app/element/hamburger.9cf7b091-55e9-11e9-a976-7f4d0b07eef6.png"
      style="width: 20%"/>
                  <span class="name">{{ item.residentFiles_Name }}</span>
                  <span class="gender-age">{{ item.age }}岁</span>
                </div>
                <el-tag 
                  :type="riskLevelMap[item.manageLevel]" 
                  size="small">
                  {{item.manageLevel }}
                </el-tag>
              </div>

              <!-- 疾病标签 -->
              <div class="disease-tags">
                <el-tag
                  v-for="(disease, i) in item.manageNCD"
                  :key="i"
                  type="info"
                  size="small"
                  class="tag">
                  {{ disease }}
                </el-tag>
              </div>

              <!-- 详细信息 -->
              <div class="detail-item">
                <span class="label">签约时间：</span>
                <span class="value">{{ item.sign_StartTime }}</span>
              </div>
              <div class="detail-item">
                <span class="label">联系电话：</span>
                <span class="value">{{ item.phone }}</span>
              </div>
              <div class="detail-item">
                <span class="label">身份证号：</span>
                <span class="value">{{ item.idCard || idCardFilter }}</span>
              </div>
              <div class="detail-item">
                <span class="label">签约周期：</span>
                <span class="value">{{ item.sign_StartTime }}--{{ item.sign_EndTime }}</span>
              </div>

              <div class="card-footer">
                  <el-button type="primary" size="small" @click="handleManage(item.residentFiles_Id)">
                    管理
                  </el-button>
              </div>
            </el-card>
          
        </el-row>
        </el-tab-pane>

<el-tab-pane label="列表">
    <el-table :data="kpdata" border style="width: 100%">
    <el-table-column prop="residentFiles_Id" label="序号" width="80" />
    <el-table-column prop="residentFiles_Name" label="姓名" width="150" />
    <el-table-column prop="sex" label="性别" width="150" />
    <el-table-column prop="age" label="年龄" width="150" />
    <el-table-column prop="phone" label="联系电话" width="150" />
    <el-table-column prop="idCard" label="身份证号" width="200" />
    <el-table-column prop="manageNCD" label="病种" width="200" />
    <el-table-column  label="操作" width="200" >
      <template v-slot="scoped">
        <el-button type="primary" @click="handleManage(scoped.row.residentFiles_Id)">管理</el-button>
      </template>
    </el-table-column>
  </el-table>
</el-tab-pane>
       </el-tabs>
      </el-main>
    </el-container>
  </div>
</template>
    

<script setup lang="ts">
import axios from 'axios';
const apiUrl = import.meta.env.VITE_APP_API_URL;
import { ElMessage, ElMessageBox } from 'element-plus';
import moment from 'moment';
import { onMounted, reactive, ref,watch } from 'vue'
import { useRouter, useRoute } from 'vue-router';
import { regionData } from "element-china-area-data";//引入
import { useCounterStore } from '@/stores/counter';
import type { TreeInstance } from 'element-plus'
// console.log(regionData)
//pini保存
const store = useCounterStore();
//跳转
const router = useRouter();
const formLabelWidth = '140px'
// 风险等级映射
const riskLevelMap:any = {
  '1': { label: '一级', type: 'danger' },
  '2': { label: '二级', type: 'warning' },
  '3': { label: '三级', type: 'success' }
}

// 患者列表数据
const patientList = reactive(
  {
    residentFiles_Name:"",
    sex:"",
    age:0,
    idCard:"",
    phone:"",
    birthday:"",
    sign_StartTime:"",
    sign_EndTime:"",
    manageNCD:"",
    manageLevel:""
  }
)

// 身份证号过滤器
const idCardFilter = (value: string) => {
  return value.replace(/(\d{4})\d{8}(\d{4})/, '$1********$2')
}

// 查询处理
//分页参数
const page1 = reactive({
  PageIndex:1,
  PageSize:10,
  totalCount:0,
  totalPage:0 
})
//查询参数
const form = reactive({
  Hypertension: null,
  ResidentFiles_Name: '',
})

//数据源
const kpdata:any = ref([])
//查询数据
const handleQuery = async () => {
  try {
    //实际应调用接口
    await axios.get(apiUrl+'/T7/Sign/GetResidentFilesList', { 
      params: {
        PageIndex: page1.PageIndex,
        PageSize: page1.PageSize,
        ResidentFiles_Name: form.ResidentFiles_Name,
      } 
    }).then(res=>{
      if(res.data.code==210)
    {
      Object.assign(patientList, res.data.list[0]);
      kpdata.value = res.data.list; 
      console.log("卡片信息:",patientList)
      page1.totalCount = res.data.totalCount;
      page1.totalPage = res.data.totalPage; 
    }
    })
 
  } catch (error) {
    console.error(error)
  }
}

// 管理操作
const handleManage = (residentFiles_Id: number) => {
  router.push({
    name: 'PatientDetail',
    query:{
    residentFiles_Id:residentFiles_Id
    }
  })
  console.log('管理患者:',residentFiles_Id)
  // 实际跳转到管理详情页
}






// 初始化数据
onMounted(() => {
  handleQuery();//卡片
  //getTableData()//列表
})



</script>

<style scoped>
.stats-container {
  margin-bottom: 20px;
}
.stat-item {
  padding: 15px;
  border-radius: 4px;
  color: #fff;
}
.stat-item.total { background: #409EFF; }
.stat-item.high-risk { background: #F56C6C; }
.stat-item.medium-risk { background: #E6A23C; }
.stat-item.low-risk { background: #67C23A; }
.stat-label { font-size: 14px; }
.stat-value { font-size: 24px; font-weight: bold; }

.patient-card {
  margin-bottom: 20px;
  transition: box-shadow 0.3s;
}
.patient-card:hover {
  box-shadow: 0 2px 12px 0 rgba(0,0,0,.1);
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}
.patient-info .name {
  font-size: 16px;
  font-weight: 500;
  margin-right: 8px;
}
.patient-info .gender-age {
  color: #909399;
  font-size: 14px;
}

.disease-tags {
  margin: 10px 0;
}
.disease-tags .tag {
  margin-right: 8px;
  margin-bottom: 4px;
}

.detail-item {
  font-size: 13px;
  margin: 6px 0;
  color: #606266;
}
.detail-item .label {
  color: #909399;
}

.card-footer {
  margin-top: 15px;
  text-align: right;
}
</style>